﻿<template>
  <div class="form-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      class="form-container"
    >
      <sticky
        v-if="isPreview === false"
        :z-index="10" :class-name="'sub-navbar draft'">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="isEdit === false ? createData() : updateData()"
        >保存</el-button>
      </sticky>
      <div class="form-main-container">
        <el-row v-if="false">
          <el-input v-model="temp.id" type="hidden" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="货品类别编号:" prop="goodsCategoryId" class="form-container-item">
              <el-select v-model="temp.goodsCategoryId" placeholder="请选择" clearable @clear="handleClear" ref="selectGoodsCategory" >
                <el-tree
                  :data="goodsCategorys"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClick"
                >
                </el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="编码:" prop="code" class="form-container-item">
              <el-input v-model="temp.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="名称:" prop="name" class="form-container-item">
              <el-input v-model="temp.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="助记码:" prop="shortCode" class="form-container-item">
              <el-input v-model="temp.shortCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="规格:" prop="spec" class="form-container-item">
              <el-input v-model="temp.spec" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="型号:" prop="model" class="form-container-item">
              <el-input v-model="temp.model" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="颜色:" prop="color" class="form-container-item">
              <el-input v-model="temp.color" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="条码:" prop="barCode" class="form-container-item">
              <el-input v-model="temp.barCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="二维码:" prop="qrCode" class="form-container-item">
              <el-input v-model="temp.qrCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="单位:" prop="unit" class="form-container-item">
              <el-input v-model="temp.unit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="品牌:" prop="brand" class="form-container-item">
              <el-input v-model="temp.brand" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="中包装:" prop="middlePackaging" class="form-container-item">
              <el-input-number v-model="temp.middlePackaging" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="大包装:" prop="largePackaging" class="form-container-item">
              <el-input-number v-model="temp.largePackaging" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="长度:" prop="length" class="form-container-item">
              <el-input-number v-model="temp.length" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="宽度:" prop="width" class="form-container-item">
              <el-input-number v-model="temp.width" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="高度:" prop="height" class="form-container-item">
              <el-input-number v-model="temp.height" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="长度单位:" prop="lengthUnit" class="form-container-item">
              <el-input v-model="temp.lengthUnit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="承重:" prop="weight" class="form-container-item">
              <el-input-number v-model="temp.weight" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="重量单位:" prop="weightUnit" class="form-container-item">
              <el-input v-model="temp.weightUnit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="体积:" prop="volume" class="form-container-item">
              <el-input-number v-model="temp.volume" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="体积单位:" prop="volumeUnit" class="form-container-item">
              <el-input v-model="temp.volumeUnit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="面积:" prop="area" class="form-container-item">
              <el-input-number v-model="temp.area" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="面积单位:" prop="areaUnit" class="form-container-item">
              <el-input v-model="temp.areaUnit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="库存上限:" prop="upperLimit" class="form-container-item">
              <el-input-number v-model="temp.upperLimit" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>          
          <el-col :span="8">
            <el-form-item label-width="120px" label="库存下限':" prop="lowerLimit" class="form-container-item">
              <el-input-number v-model="temp.lowerLimit" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="是否启用:" prop="isEnabled" class="form-container-item">
              <el-switch v-model="temp.isEnabled" active-color="#13ce66" inactive-color="#dcdfe6" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="备注:" prop="remark" class="form-container-item">
              <el-input v-model="temp.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { create, get, update } from '@/api/goods'
import { getAll } from '@/api/goodsCategory'

export default {
  name: 'GoodsDetail',
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        id: null,
        goodsCategoryId: null,
        code: '',
        name: '',
        shortCode: '',
        spec: '',
        model: '',
        color: '',
        barCode: '',
        qrCode: '',
        unit: '',
        brand: '',
        middlePackaging: 0,
        largePackaging: 0,
        length: 0,
        width: 0,
        height: 0,
        weight: 0,
        volume: 0,
        area: 0,
        lengthUnit: '',
        qtyUnit: '',
        weightUnit: '',
        volumeUnit: '',
        areaUnit: '',
        upperLimit: 0,
        lowerLimit: 0,
        isEnabled: true,
        remark: '',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        middlePackaging: [{ required: true, message: '中包装必须填写', trigger: 'blur' }],
        largePackaging: [{ required: true, message: '大包装必须填写', trigger: 'blur' }],
        length: [{ required: true, message: '长度必须填写', trigger: 'blur' }],
        width: [{ required: true, message: '宽度必须填写', trigger: 'blur' }],
        height: [{ required: true, message: '高度必须填写', trigger: 'blur' }],
        weight: [{ required: true, message: '承重必须填写', trigger: 'blur' }],
        volume: [{ required: true, message: '体积必须填写', trigger: 'blur' }],
        area: [{ required: true, message: '面积必须填写', trigger: 'blur' }],
        upperLimit: [{ required: true, message: '库存上限必须填写', trigger: 'blur' }],
        lowerLimit: [{ required: true, message: '库存下限必须填写', trigger: 'blur' }],
        isEnabled: [{ required: true, message: '是否启用必须填写', trigger: 'blur' }],
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }

    getAll().then(response => {
      this.goodsCategorys = this.goodsCategorysToTreeData(response.data)
    })
  },
  methods: {
    resetTemp() {
      this.temp = {
        goodsCategoryId: null,
        code: '',
        name: '',
        shortCode: '',
        spec: '',
        model: '',
        color: '',
        barCode: '',
        qrCode: '',
        unit: '',
        brand: '',
        middlePackaging: 0,
        largePackaging: 0,
        length: 0,
        width: 0,
        height: 0,
        weight: 0,
        volume: 0,
        area: 0,
        lengthUnit: '',
        qtyUnit: '',
        weightUnit: '',
        volumeUnit: '',
        areaUnit: '',
        upperLimit: 0,
        lowerLimit: 0,
        isEnabled: true,
        remark: '',
      }
    },
    handleCreate() {
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          create(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleUpdate(id) {
      get(id).then(response => {
        this.temp.id = response.data.id
        this.temp.goodsCategoryId = response.data.goodsCategoryId
        this.temp.code = response.data.code
        this.temp.name = response.data.name
        this.temp.shortCode = response.data.shortCode
        this.temp.spec = response.data.spec
        this.temp.model = response.data.model
        this.temp.color = response.data.color
        this.temp.barCode = response.data.barCode
        this.temp.qrCode = response.data.qrCode
        this.temp.unit = response.data.unit
        this.temp.brand = response.data.brand
        this.temp.middlePackaging = response.data.middlePackaging
        this.temp.largePackaging = response.data.largePackaging
        this.temp.length = response.data.length
        this.temp.width = response.data.width
        this.temp.height = response.data.height
        this.temp.weight = response.data.weight
        this.temp.volume = response.data.volume
        this.temp.area = response.data.area
        this.temp.lengthUnit = response.data.lengthUnit
        this.temp.qtyUnit = response.data.qtyUnit
        this.temp.weightUnit = response.data.weightUnit
        this.temp.volumeUnit = response.data.volumeUnit
        this.temp.areaUnit = response.data.areaUnit
        this.temp.upperLimit = response.data.upperLimit
        this.temp.lowerLimit = response.data.lowerLimit
        this.temp.isEnabled = response.data.isEnabled
        this.temp.remark = response.data.remark
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.setTagsViewTitle()
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const tempData = Object.assign({}, this.temp)
          const { id } = this.temp
          update(id, tempData).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    setTagsViewTitle() {
      const title = '编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    handleNodeClick(data) {
      this.temp.goodsCategoryId = data.id
      this.$refs.selectGoodsCategory.blur()
    },
    handleClear () {
      this.temp.goodsCategoryId = null
    },
    goodsCategorysToTreeData(data) {
      const result = []

      if (data) {
        const level1Nodes = data.filter(f => f.parentId === null || f.parentId === '00000000-0000-0000-0000-000000000000')
        level1Nodes.forEach((item, index) => {
          const node = {
            id: item.id,
            name: item.name,
            recursion: item.recursion,
            children: []
          }
          result.push(node)
          this.goodsCategorysToTreeDataLoadChildren(node, data)
        })
      }

      return result
    },
    goodsCategorysToTreeDataLoadChildren(node, data) {
      if (data && node) {
        const childrenNodes = data.filter(f => f.parentId === node.id)
        if (childrenNodes) {
          childrenNodes.forEach((item, index) => {
            const childrenNode = {
              id: item.id,
              name: item.name,
              recursion: item.recursion,
              children: []
            }
            node.children.push(childrenNode)
            this.goodsCategorysToTreeDataLoadChildren(childrenNode, data)
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.form-container {
  position: relative;

  .form-main-container {
    padding: 40px 45px 20px 50px;

    .form-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .form-container-item {
        float: left;
      }
    }
  }
}
</style>
